<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>辐射对比</title>
</head>
<body style="background-color: transparent;">
<div id="main" style="min-height: 600px;min-width: 1000px"></div>
<script type="text/javascript" src="../js/jquery-1.12.0.min.js" ></script>
<script type="text/javascript" src="../js/echarts-all.js" ></script>
<script>

    var myChart = echarts.init(document.getElementById("main"));
    //vapp.title = '多 X 轴示例';

    var colors = ['#0A0A0A', '#d14a61', '#675bba','	#98FB98','#8B6914'];
    option = {
        title : {
            text: '辐照度直方图',
            //subtext: '纯属虚构',
            textStyle:{
                //文字颜色
                color:'#fff',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                //字体系列
                fontFamily:'sans-serif',
                //字体大小
                fontSize:18
            },
           // subtext: '纯属虚构',
            textStyle:{
                color: '#fff'
            }
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['辐照'],
            textStyle:{color:"#fff"}
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
               
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisLabel:{
                    interval:0,
                    rotate:45,//倾斜度 -90 至 90 默认为0
                    margin:5,
                    textStyle:{
                        fontWeight:"bolder",
                        color:"#fff"
                    }
                },
            }
        ],
        yAxis : [
            {
                name: '辐照度(mw)',
                type : 'value',
                axisLabel:{
                    interval:0,
                    rotate:0,//倾斜度 -90 至 90 默认为0
                    margin:5,
                    textStyle:{
                        fontWeight:"bolder",
                        color:"#fff"
                    }
                }
            }
        ],
        series : [
            {
                name:'辐照',
                type:'line',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 15.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>
